Menú Hamburguesa

Visión General del Componente

El Burger (menú hamburguesa) en Emvi UI es un disparador de navegación compacto, optimizado para móvil e interfaces densas. Alterna el cajón de navegación o el menú de la app sin ocultar acciones primarias. En el kit de Figma (gratuito y premium) el componente se entrega tokenizado y listo para motion, con variantes de abierto/cerrado, grosor de trazo y paridad de tema, facilitando un handoff limpio al front-end sin depender de ejemplos HTML extensos.

Ahorrando espacio en pantalla

El icono de menú hamburguesa es perfecto para ahorrar espacio en pantalla, especialmente en dispositivos móviles. Al ocultar el menú principal detrás de este símbolo compacto, puedes mantener la interfaz limpia y ordenada. Los usuarios pueden acceder fácilmente al menú completo cuando lo necesiten, permitiendo una experiencia de navegación más fluida y enfocada.

Mejorando la experiencia del usuario

Usar un icono de menú hamburguesa mejora la experiencia del usuario al simplificar la navegación. El diseño reconocible de tres líneas hace que sea intuitivo para los usuarios encontrar y abrir el menú oculto. Esto ayuda a crear una interfaz fluida y fácil de usar donde los usuarios pueden navegar por el sitio sin esfuerzo, independientemente del dispositivo que estén utilizando.

Ofreciendo navegación flexible

El icono de menú hamburguesa proporciona opciones de navegación flexibles. Puede albergar una variedad de elementos de menú y enlaces, lo que lo hace adaptable a diferentes tipos de contenido y estructuras de sitio. Esta flexibilidad permite a los diseñadores incluir más opciones de navegación sin abrumar al usuario, asegurando que la interfaz permanezca eficiente y fácil de usar. Nuestro UI KIT incluye iconos de menú hamburguesa personalizables que se integran perfectamente en cualquier diseño, proporcionando tanto funcionalidad como estilo.

Tipos y Variantes

Variantes clave para equipos de producto:
- Solo ícono (3 barras, extremos redondeados o rectos), con/sin contenedor.
- Con etiqueta (“Menú”) para mejorar descubribilidad.
- Contenido / Ghost (fondo lleno vs. transparente para controlar contraste).
- Variantes de movimiento: morph a “X”, rotaciones + desvanecidos, o progreso acoplado al cajón.
- Ubicaciones: esquina superior izquierda/derecha o centrado en la barra. Los tokens cubren tamaño, trazo, gap y estados hover/pressed/active en claro/oscuro.

Tamaños, Espaciado y Escala

Escalas recomendadas del botón-ícono: 24 / 32 / 40 px (SM/MD/LG). Mantén el área táctil ≥44×44 px con padding del contenedor, no engrosando el trazo. Usa 1.5–2 px de trazo para legibilidad en pantallas de baja densidad. Deja 8–12 px al borde de la barra de app y alinea con logo y acciones primarias. Si convive con título, conserva la línea base para evitar saltos al alternar estados.

Estados y Comportamiento

Estados: default, hover, focus-visible, pressed, activo (abierto) y deshabilitado. El estado “abierto” debe persistir visualmente (morph a “X” o fondo activo). Acopla el estado del disparador con el cajón: abrir → cajón visible; cerrar → oculto. Guía de motion: 150–220 ms para morph del ícono y 200–280 ms para entrada/salida del cajón, con curvas cúbicas. Respeta reducción de movimiento con swaps estáticos o transiciones mínimas.

Integración y Uso

Prioriza navegación visible (tabs, bottom nav) para tareas frecuentes; usa el burger para destinos secundarios. Evita múltiples disparadores. Si hay 2–3 destinos críticos, expónlos en la app bar o en pestañas y deja el cajón para el resto de enlaces, cuenta y ajustes. En desktop, promociona el cajón a sidebar manteniendo la misma arquitectura de información para no desorientar al usuario entre dispositivos.

Accesibilidad

Incluye una etiqueta textual clara en Figma (p. ej., “Abrir menú”) como nombre accesible. Ofrece foco visible persistente y área táctil grande. Al abrir, mueve el foco al primer elemento del cajón; al cerrar, devuélvelo al disparador. Asegura contraste 4.5:1 del ícono/etiqueta contra la barra. Anuncia el cambio de estado (expandido/colapsado) y evita el scroll del fondo mientras el cajón está activo.

Integración con Figma y Tailwind

Figma: componente con propiedades de tamaño (SM/MD/LG), trazo, extremos (redondo/cuadrado), etiqueta on/off y estado (default/hover/pressed/active). Incluye especificación de motion para morph a “X” y transiciones del cajón. Tokens: nav.burger.size, nav.burger.stroke, nav.burger.bg.active, nav.drawer.overlay. Tailwind: mapear tokens a utilidades sin fijar HTML en la documentación; entregar nombres de estados y tiempos para una implementación fiel.

Buenas Prácticas de Implementación

- Preferir ícono + etiqueta en primeras sesiones o contextos poco familiares.
- Hacer el cajón escaneable: agrupar navegación, utilidades (búsqueda, cuenta) y enlaces secundarios.
- Evitar cambios de layout: reserva espacio para el estado activo y fija la altura de la app bar.
- No usar íconos ambiguos que no remitan a “menú”.
- En entornos enterprise, soportar atajos de teclado y mostrar la pista en el encabezado del cajón.
- Documentar el comportamiento cross-breakpoint (burger → tabs/sidebar) para mantener la IA.